import { Pie, Gauge, Tiny, DualAxes } from '@ant-design/plots';
import { Row, Divider } from 'antd';
import ReactDOM from 'react-dom';
import React, { useState, useEffect } from 'react';

export interface MyChartsProps {
    name?: string;
    pieDataUrl?: string;
    pieAngleField?: string;
    pieColorField?: string;
    pieText?: string;
    gaugeDataUrl?: string;
    gaugeTarget?: number;
    gaugeTotal?: number;
    gaugeName?: string;

    dualAxesDataUrl?: string;
    dualAxesXField?: string;
    dualAxesIntervalYField?: string;
    dualAxesLineYField?: string;
}

const MyCharts: React.FC<MyChartsProps> = function
    ({ name, pieDataUrl, pieAngleField, pieColorField, pieText,
        gaugeDataUrl, gaugeTarget, gaugeTotal, gaugeName,
        dualAxesDataUrl, dualAxesXField, dualAxesIntervalYField, dualAxesLineYField,
        ...otherProps }) {

    const [pieData, setPieData] = useState([]);
    const [gaugeData, setGaugeData] = useState({});
    const [dualAxesData, setDualAxesData] = useState([]);
    useEffect(() => {
        fetch(pieDataUrl)
            .then(response => response.json())
            .then(data => {
                setPieData(data.data);
            })
        fetch(gaugeDataUrl)
            .then(response => response.json())
            .then(data => {
                setGaugeData(data.data);
            })
        fetch(dualAxesDataUrl)
            .then(response => response.json())
            .then(data => {
                setDualAxesData(data.data);
            })
    }, [])

    // if (pieDataUrl === '') {
    //     pieData [
    //         { type: '分类一', value: 27 },
    //         { type: '分类二', value: 25 },
    //         { type: '分类三', value: 18 },
    //         { type: '分类四', value: 15 },
    //         { type: '分类五', value: 10 },
    //         { type: '其他', value: 5 },
    //     ];
    //     pieAngleField = 'value';
    //     pieColorField = 'type';
    //     pieText = 'Antv\nCharts';
    // } 

    // }
    // if (gaugeDataUrl === '') {
    //     gaugeTarget = 120;
    //     gaugeTotal = 400;
    //     gaugeName = 'score';
    // } else {
    //     // TODO fetch gaugeData
    //     let gaugeData = {
    //         target: 0,
    //         total: 0
    //     }


    //     gaugeTarget = gaugeData.target;
    //     gaugeTotal = gaugeData.total;
    // }


    const pieConfig = {
        data: pieData,
        angleField: pieAngleField,
        colorField: pieColorField,
        innerRadius: 0.6,
        label: {
            text: pieAngleField,
            style: {
                fontWeight: 'bold',
            },
        },
        legend: {
            color: {
                title: false,
                position: 'right',
                rowPadding: 5,
            },
        },
        annotations: [
            {
                type: 'text',
                style: {
                    text: pieText,
                    x: '50%',
                    y: '50%',
                    textAlign: 'center',
                    fontSize: 40,
                    fontStyle: 'bold',
                },
            },
        ],
    };
    const gaugeConfig = {
        width: 400,
        height: 400,
        autoFit: true,
        data: {
            target: gaugeData.target,
            total: gaugeData.total,
            name: gaugeName,
        },
        legend: false,
    };



    //let dualAxesData;
    // if (dualAxesDataUrl === '') {
    //     dualAxesData = [
    //         { time: '10:10', call: 4, waiting: 2, people: 2 },
    //         { time: '10:15', call: 2, waiting: 6, people: 3 },
    //         { time: '10:20', call: 13, waiting: 2, people: 5 },
    //         { time: '10:25', call: 9, waiting: 9, people: 1 },
    //         { time: '10:30', call: 5, waiting: 2, people: 3 },
    //         { time: '10:35', call: 8, waiting: 2, people: 1 },
    //         { time: '10:40', call: 13, waiting: 1, people: 2 },
    //     ]
    //     dualAxesXField = 'time';
    //     dualAxesIntervalYField = 'waiting';
    //     dualAxesLineYField = 'people';
    // } 

    const dualAxesConfig = {
        xField: dualAxesXField,
        data: dualAxesData,
        legend: {
            color: {
                itemMarker: (v) => {
                    if (v === dualAxesIntervalYField) return 'rect'
                    return 'smooth'
                }
            }
        },
        children: [
            {
                type: 'interval',
                yField: dualAxesIntervalYField,
            },
            // {
            //     type: 'line',
            //     yField: dualAxesLineYField,
            //     shapeField: 'smooth',
            //     scale: { color: { relations: [[dualAxesLineYField, '#fdae6b']] } },
            //     axis: { y: { position: 'right' } },
            //     style: { lineWidth: 2 },
            // },
        ],
    };
    return (
        <>
            <Divider>库存分布图</Divider>
            <Row>
                <Pie {...pieConfig} />
            </Row>
            <Divider>仓库空间利用率</Divider>
            <Row>
                <div style={{ textAlign: 'center', width: '100%' }}>
                    <Gauge {...gaugeConfig} />
                </div>

            </Row>

            <Divider>柱状图</Divider>
            <Row>
                <DualAxes {...dualAxesConfig} />
            </Row>
        </>
    )
}

MyCharts.displayName = 'MyCharts';
export default MyCharts;